<script setup>
import { ref ,onMounted} from 'vue'
import HomePanel from './HomePanel.vue';
import { getNewActicleService } from '@/api/Home';
const hotArticle = ref('新鲜好物')
const Rich = ref('lol开业大酬宾，皮肤买一送一，剑姬御剑传说上架')

// 获取新鲜好物数据的逻辑
const newActicleList = ref([])
const getNewActicle = async() => {
    const res = await getNewActicleService()
    newActicleList.value = res.data.result
}
// 调用获取新鲜好物的函数
onMounted(() => {
    getNewActicle()
})
</script>
<template>
    <HomePanel :title="hotArticle" :text='Rich'>
    <template #new>
        <div class="Fresh">
            <ul>
                <li v-for="item in newActicleList" :key="item.id">
                    <router-link :to="`/detail/${item.id}`">
                        <!-- 图片 -->
                        <div class="img"><img :src="item.picture" alt="" ></div>
                        <!-- 内容和价格 -->
                        <div class="price">
                            <p class="introduce ellipsis">{{ item.name }}</p>
                            <span class="price1">￥{{ item.price }}</span>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </template>
</HomePanel>
    
</template>
<style scoped>
   .Fresh ul{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
   }
   .Fresh ul li {
    background-color: #fff;
     width: 260px;
     height: 320px;
   }
   .Fresh ul li a{
    display: block;
    width: 100%;
    height: 100%;
   }
    .Fresh ul li:hover{
        transform: translate(-5px);
        box-shadow: 0px -5px 20px #b7b3b3;
        transition: all .5s;
    }
   .Fresh ul li a .img{
    height: 260px;
    width: 100%;
    background-color: #fff;
   }
   .Fresh ul li a .introduce{
    text-align: center;
    margin-bottom: 5px;
    padding: 0 10px;
   }
    .Fresh ul li a .price1{
        display: block;
        width: 100%;
        color: red;
        font-weight: 700;
        text-align: center;
    }
    .ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>